<template>
    <div class="content">
        <div class="login">登录/注册</div>
        <div id="login-div">
            <div id="tip">我已经是Stage用户</div>
            <div id="mini-tip">*请使用账号名和密码登录</div>
            <el-form :model="ruleForm2"
                     :rules="rules2"
                     ref="ruleForm2"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="账户名"
                              prop="account">
                    <el-input type="text"
                              v-model="ruleForm2.account"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码"
                              prop="pass">
                    <el-input type="password"
                              v-model="ruleForm2.pass"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button id="my-button"
                               type="primary"
                               @click="submitForm('ruleForm2')">登录</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="register-div">我想成为 Stage 的用户
            <div class="register-tip">*如果您还不是 Stage 的用户，请在此注册。</div>
            <div class="register-tip">*请您给我们提供一些必要信息，这将使您在 Stage 有个更快更方便的购买过程。</div>
            <router-link to="/Register"
                         class="link">
                <el-button id="create-button">创建用户名</el-button>
            </router-link>
        </div>
    
    </div>
</template>
<script>
export default {
    data() {
        var checkAccount = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('账户名不能为空'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            ruleForm2: {
                account: '',
                pass: ''
            },
            rules2: {
                pass: [{
                    validator: validatePass,
                    trigger: 'blur'
                }],
                account: [{
                    validator: checkAccount,
                    trigger: 'blur'
                }]
            }
        };
    },
    methods: {
        submitForm(formName) {
            var pass = this.ruleForm2.pass.toString();
            var account = this.ruleForm2.account.toString();
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    $.ajax({
                        type: "Post",
                        url: "/Get/Token",
                        data: {
                            username: account,
                            password: pass,
                            grant_type: "password"
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data != null) {
                                $.ajax({
                                    type: "GET",
                                    url: "/api/User/GetUserInfo",
                                    headers: {
                                        Authorization: "Bearer " + data.access_token
                                    },
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function (data) {
                                        _this.$store.dispatch('setUserInfoactions',
                                            data
                                        );
                                        var user = JSON.stringify(data);
                                        $.cookie('front-user', user, {
                                            path: '/'
                                        });
                                    },
                                    error: function (msg) {
                                        _this.Failed("身份验证失败")
                                    }
                                });
                                var my = JSON.stringify(data);
                                $.cookie('front-token', my, {
                                    path: '/'
                                });
                                window.location.href = 'http://localhost:60861/#/Index';
                            }
                        },
                        error: function (msg) {
                            _this.Failed("密码或账号不正确")
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        Failed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        }
    }
}
</script>
<style>
#create-button {
    color: white;
    background-color: black;
    margin-top: 15%;
}

.register-tip {
    font-size: 0.6em;
    margin-top: 3%;
}

#register-div {
    display: inline-block;
    float: right;
    margin-right: 2%;
}

#tip {
    margin-left: 16%;
    margin-bottom: 5%;
}

#mini-tip {
    font-size: 0.5em;
    margin-left: 16%;
    margin-bottom: 10%;
}

#my-button {
    background-color: black;
}

#login-div {
    display: inline-block;
    max-width: 300px;
}

.content {
    margin-top: 13%;
    margin-left: 20%;
    min-height: 500px;
    max-width: 900px;
    border-top: 1px solid #000;
}

.login {
    margin-top: 1%;
    margin-bottom: 1%;
}
</style>